<template>
  <section>
    <div class="flex">
      <el-button 
        v-for="item in labels" 
        :key="item.name" 
        @click="changeValue(item.name)"
      >
        {{item.label}}
      </el-button>
    </div>
    <slot></slot>
  </section>
</template>

<script>
export default {
  props: {
    activeName: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      labels: [],
      value: this.activeName
    }
  },
  mounted () {
    this.labels = this.$slots.default().map(item => item.props)
  },
  methods: {
    changeValue (name) {
      this.$emit('tab-click')
      this.value !== name  && this.$emit('tab-change')
      this.value = name
    }
  }
}
</script>

<style>

</style>





















